<template>
  <a-modal
    :title="'新开版本'"
    :visible="true"
    width="40%"
    :footer="null"
    @cancel="reset"
  >
    <a-card>
      <a-row
        type="flex"
        justify="start"
        align="top"
      >
        <a-col :span="24">
          <a-form
            :form="form"
            @submit="handleSubmit"
          >
            <a-form-item
              label="图片"
              :required="true"
            >
              <a-upload
                name="file"
                list-type="picture-card"
                :data="{ type: 2 ,brand:brandName }"
                :multiple="true"
                class="avatar-uploader"
                :action="uploadUrl"
                 :fileList="fileList"
                @change="handleChange"
                v-decorator="[
                  'url',
                  {
                    rules: [{ required: true, message: '请上传图片' }]
                  }
                ]"
              >
                <div v-if="fileList.length <= 5">
                  <a-icon :type="uploadLoading ? 'loading' : 'plus'" />
                  <div class="ant-upload-text">
                    上传图片
                  </div>
                </div>
              </a-upload>
            </a-form-item>
            <a-row>
              <a-col
                :span="16"
                :offset="8"
                class="info-action"
              >
                <a-button
                  type="primary"
                  @click="reset"
                >返回</a-button>
                <a-button
                  type="primary"
                  class="ml-20"
                  html-type="submit"
                  :loading="loading"
                >保存</a-button>
              </a-col>
            </a-row>
          </a-form>
        </a-col>
      </a-row>
    </a-card>
  </a-modal>
</template>

<script>
import { postAction } from '@/api/manage'
import { pattern } from '@api/pattern/index'
import { currencyCreate, uploadUrl, createEdition, imgCreate } from '@api/pattern/index.js'
export default {
  components: {},

  props: {
    color: {
      type: Object,
      default: null,
    },
    patternId: {
      type: [Number, String],
      default: '',
    },
     brandName: {
      type: String,
      default: ''
    }
  },

  data() {
    return {
      colors: [],
      loading: false,
      uploading: false,
      fileList: [],
      imageUrl: '',
      uploadLoading: false,
      uploadUrl,
      colorName: '',
    }
  },

  computed: {
    jobNumber() {
      return this.$store.getters.userInfo.workNo || ''
    },
  },

  beforeCreate() {
    this.form = this.$form.createForm(this, { name: 'category' })
  },

  created() {},

  methods: {
   handleChange(info) {
      let fileList = [...info.fileList]
      this.fileList = info.fileList
      if (info.file.status === 'uploading') {
        this.uploading = true
        return
      }
     if (info.file.status === 'done') {
        this.uploading = false
        let list = fileList.map(file => {
          if (file.response) {
            if (file.response.code == 200) {
              if (file.response.data.yidunSuggestion == 0) {
                file.dataId = file.response.data.dataId
              } else {
                let that = this
                that.$message.error(file.response.data.yidunExplain ? '该图案包含' + file.response.data.yidunExplain : '该图案包含敏感内容')
                this.fileList.pop()
                file.status = 'error'
                // that.$confirm({
                //   content: file.response.data.yidunExplain ? '该图案包含' + file.response.data.yidunExplain + '要继续上传吗？' : '该图案包含敏感内容，要继续上传吗？',
                //   onOk: () => {
                //     file.dataId = file.response.data.dataId
                //   },
                //   onCancel() {
                //     that.fileList.pop()
                //   }
                // })
              }
              file.url = file.response.data.url
            } else {
              this.$message.error('图片上传失败')
              this.fileList.pop()
              return fileList
            }
          }
          return file
        })
        this.fileList = list.filter(file => file.status != 'error');
      }
      if (info.file.status === 'error') {
        this.$message.error('图片上传失败')
      }
    },
    beforeUpload: function (file) {
      var fileType = file.type
      if (fileType.indexOf('image') < 0) {
        this.$message.warning('请上传图片')
        return false
      }
    },
    handleSubmit(e) {
      e.preventDefault()
       this.form.setFieldsValue({
        url: this.fileList.map(item => {
          return {
            name: item.name,
            dataId: item.dataId,
            url: item.url
          }
        })
      })
      this.form.validateFields((err, values) => {
        // console.log(err, values)
        if (!err) {
          this.submit(values)
        }
      })
    },
    async addVersion(id) {},
    async submit(values) {
      console.log(values)
      try {
        this.loading = true
        const urls = values.url || []
        // const { jobNumber, colorName: name , patternId} = this
        const colorParams = {
          jobNumber: this.jobNumber,
          name: this.color.name,
          patternColorId: this.color.id,
        }
        // console.log(colorParams)
        const res = await createEdition('edition', colorParams)
        if (res.code == 200) {
          // const version = await currencyCreate('edition', { jobNumber, patternColorId: res.data.id || color.id, name:`版本-${name}`})
          // 新增图片地址
          const images = urls.map((item) => {
            return {
              name: item.name,
              dataId: item.dataId ? item.dataId : '',
              url: item.url ? item.url : item.response.data.url,
            }
          })
          const params = {
            jobNumber: this.jobNumber,
            images,
            editionId: res.data.id,
          }
          const imageList = urls.map((item) => {
            return item.url ? item.url : item.response.data.url
          })
          const checkParams = {
            colorId: this.color.id,
            imageList: imageList,
            patternId: this.patternId,
            scene: 2,
          }
          postAction(`${pattern}pattern/examine/check`, checkParams).then((res) => {
            if (res.code != 200) {
              this.$confirm({
                content: res.msg,
                onOk: () => {
                  postAction(`${pattern}imageUrl/batchSave`, params).then((res) => {
                    this.$message.success('新开版本成功')
                    this.reset()
                  })
                  const initParams = {
                    colorId: this.color.id,
                    patternId: this.patternId,
                    scene: 2,
                    jobNumber:this.jobNumber
                  }
                  postAction(`${pattern}pattern/examine/init`, initParams).then((res) => {
                    if ((res.data = 200)) {
                      this.$message.success('图案审核/批注状态已重置')
                    }
                  })
                },
                 onCancel: () => {
                  this.reset()
                }
              })
            } else {
              postAction(`${pattern}imageUrl/batchSave`, params).then((res) => {
                this.$message.success('新开版本成功')
                this.reset()
              })
            }
          })
        } else {
          this.$message.error(res.msg || res.message)
        }
      } catch (error) {
        console.log(error)
        this.$message.error(error.msg || '出错了')
      }
    },
    reset() {
      this.form.resetFields()
      this.loading = false
      this.fileList = []
      this.$emit('close')
    },
  },
}
</script>

<style scoped lang="less">
.info-action {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
  // margin-bottom: 20px;
}
.ml-20 {
  margin-left: 20px;
}
.poster {
  width: 100px;
  height: 100px;
  margin-right: 20px;
  position: relative;
  &:hover {
    .img-modal {
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
  .img {
    width: 100%;
    height: 100%;
  }
  .img-modal {
    background-color: rgba(0, 0, 0, 0.5);
    display: none;
    position: absolute;
    color: #fff;
    font-size: 20px;
    width: 100%;
    top: 0;
    height: 100%;
    left: 0;
  }
}
.fileList {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: wrap;
}
</style>